﻿@page
@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.TooltipsModel
@{
    ViewData["Title"] = "Tooltips";
}

@section styles {
    <abp-style-bundle>
        <abp-style src="/css/demo.css" />
    </abp-style-bundle>
}

<h2>Tooltips</h2>

<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/tooltips/" target="_blank"> Bootstrap Tooltips</a>.</p>

<h4>Example</h4>

<div class="demo-with-code">
    <div class="demo-area">

        <abp-button abp-tooltip="Tooltip">
            Tooltip Default
        </abp-button>
        <abp-button abp-tooltip-top="Tooltip">
            Tooltip on top
        </abp-button>
        <abp-button abp-tooltip-right="Tooltip">
            Tooltip on right
        </abp-button>
        <abp-button abp-tooltip-bottom="Tooltip">
            Tooltip on bottom
        </abp-button>
        <abp-button disabled="true" abp-tooltip="Tooltip">
            Disabled button Tooltip
        </abp-button>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper" active="true">
                <pre><code>
&lt;abp-button abp-tooltip=&quot;Tooltip&quot;&gt;
      Tooltip Default
&lt;/abp-button&gt;

&lt;abp-button abp-tooltip-top=&quot;Tooltip&quot;&gt;
      Tooltip on top
&lt;/abp-button&gt;

&lt;abp-button abp-tooltip-right=&quot;Tooltip&quot;&gt;
      Tooltip on right
&lt;/abp-button&gt;

&lt;abp-button abp-tooltip-bottom=&quot;Tooltip&quot;&gt;
      Tooltip on bottom
&lt;/abp-button&gt;

&lt;abp-button disabled=&quot;true&quot; abp-tooltip=&quot;Tooltip&quot;&gt;
      Disabled button Tooltip
&lt;/abp-button&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;button class=&quot;btn&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; title=&quot;&quot; data-original-title=&quot;Tooltip&quot;&gt;
    Tooltip Default
&lt;/button&gt;

&lt;button class=&quot;btn&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; title=&quot;&quot; data-original-title=&quot;Tooltip&quot;&gt;
    Tooltip on top
&lt;/button&gt;

&lt;button class=&quot;btn&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;right&quot; title=&quot;&quot; data-original-title=&quot;Tooltip&quot;&gt;
     Tooltip on right
&lt;/button&gt;

&lt;button class=&quot;btn&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;bottom&quot; title=&quot;&quot; data-original-title=&quot;Tooltip&quot;&gt;
    Tooltip on bottom
&lt;/button&gt;

&lt;span class=&quot;d-inline-block&quot; tabindex=&quot;0&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; title=&quot;&quot; data-original-title=&quot;Tooltip&quot;&gt;
    &lt;button class=&quot;btn&quot; disabled=&quot;disabled&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot; data-placement=&quot;top&quot; style=&quot;pointer-events: none;&quot;&gt;
        Disabled button Tooltip
    &lt;/button&gt;
&lt;/span&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>
